import Observer from '../common/Observer'
import pxmu from 'pxmu'

// var canvas = document.getElementById('registcanvas'),
//     ctx = canvas.getContext('2d'),
//     w = canvas.width = window.innerWidth,
//     h = canvas.height = window.innerHeight,

//     hue = 217,
//     stars = [],
//     count = 0,
//     maxStars = 2500;//星星数量

// var canvas2 = document.createElement('canvas'),
//     ctx2 = canvas2.getContext('2d');
// canvas2.width = 100;
// canvas2.height = 100;
// var half = canvas2.width / 2,
//     gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
// gradient2.addColorStop(0.025, '#CCC');
// gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
// gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
// gradient2.addColorStop(1, 'transparent');

// ctx2.fillStyle = gradient2;
// ctx2.beginPath();
// ctx2.arc(half, half, half, 0, Math.PI * 2);
// ctx2.fill();

// // End cache

// function random(min, max) {
//     if (arguments.length < 2) {
//         max = min;
//         min = 0;
//     }

//     if (min > max) {
//         var hold = max;
//         max = min;
//         min = hold;
//     }

//     return Math.floor(Math.random() * (max - min + 1)) + min;
// }

// function maxOrbit(x, y) {
//     var max = Math.max(x, y),
//         diameter = Math.round(Math.sqrt(max * max + max * max));
//     return diameter / 2;
//     //星星移动范围，值越大范围越小，
// }

// var Star = function () {

//     this.orbitRadius = random(maxOrbit(w, h));
//     this.radius = random(60, this.orbitRadius) / 18;
//     //星星大小
//     this.orbitX = w / 2;
//     this.orbitY = h / 2;
//     this.timePassed = random(0, maxStars);
//     this.speed = random(this.orbitRadius) / 500000;
//     //星星移动速度
//     this.alpha = random(2, 10) / 10;

//     count++;
//     stars[count] = this;
// }

// Star.prototype.draw = function () {
//     var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
//         y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
//         twinkle = random(10);

//     if (twinkle === 1 && this.alpha > 0) {
//         this.alpha -= 0.05;
//     } else if (twinkle === 2 && this.alpha < 1) {
//         this.alpha += 0.05;
//     }

//     ctx.globalAlpha = this.alpha;
//     ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
//     this.timePassed += this.speed;
// }

// for (var i = 0; i < maxStars; i++) {
//     new Star();
// }

// function animation() {
//     ctx.globalCompositeOperation = 'source-over';
//     ctx.globalAlpha = 0.5; //尾巴
//     ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
//     ctx.fillRect(0, 0, w, h)

//     ctx.globalCompositeOperation = 'lighter';
//     for (var i = 1, l = stars.length; i < l; i++) {
//         stars[i].draw();
//     };

//     window.requestAnimationFrame(animation);
// }

// animation();



// 定义用户名锁 和密码锁
let usernameLock = false;
let passwordLock = false;

// 获取元素
let registDemo = document.getElementById('registDemo')
let registusername = document.getElementById('registusername')
let registpassword = document.getElementById('registpassword')
let registBtn = document.getElementById('registBtn')
let registCloseBtn = document.getElementById("registCloseBtn")


// 注册面板显示功能
Observer.on("regist-show", function () {
    registDemo.classList.remove("d-none")
})

// 注册面板隐藏功能
Observer.on("regist-hide", function () {
    registDemo.classList.add("d-none")
})

Observer.on('content-hide', function () {
    content.classList.add('d-none')
})
Observer.on('content-show', function () {
    console.log('content-show');
    content.classList.remove('d-none')
})


// 关闭按钮
registCloseBtn.onclick = function () {
    // 触发面板隐藏
    Observer.emit("regist-hide")
    // 显示首页
    Observer.emit('content-show')
    // 后退
    location.href = "/";
    // content.style.backgroundColor='red'
    div.style.backgroundImage.url=''
}


// 用户名失去焦点事件
registusername.onblur = async function () {
    // 获取用户名
    let username = this.value;
    // 正则检测
    if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(username)) {
        pxmu.fail("用户名不符合需求：字母开头，允许5-16字节，允许字母数字下划线");
        // 关锁
        usernameLock = false;
        return
    }
    // 拼接字符串
    let querystring = `username=${username}`
    // 如果通过检测 发送请求   检测用户名
    let res = await fetch("/guyun/checkusername?" + querystring);  // 因为当前请求需要被代理转发 但是不仅当前请求 还有很多请求要被转发 为了简化配置 我们在前面加一个自定义的路径 /api  /good /daguyun 等 配置完毕之后就可以在devServer的proxy中 简化匹配  后接 webpack.config.js devServer.proxy中的注释
    let { error, data } = await res.json();
    if (!error) {
        pxmu.success(data)
        // 开锁
        usernameLock = true;
        return;
    }
    // 关锁
    usernameLock = false;
    pxmu.fail(data)

}


// 密码失去焦点
registpassword.onblur = function () {
    // 获取密码
    let password = this.value;
    // 正则验证
    if (!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(password)) {
        pxmu.fail("密码不符合需求：字母开头，允许5-16字节，允许字母数字下划线");
        // 关锁
        passwordLock = false;
        return
    }
    pxmu.success("可以使用")
    passwordLock = true;
}


// 注册
registBtn.onclick = async function () {
    // 判断用户名锁和密码锁
    if (!usernameLock || !passwordLock) {
        pxmu.fail("用户名或者密码不正确，请重新检查")
        return;
    }
    // 发送请求 注册
    let res = await fetch("/guyun/regist", {
        method: "post",
        body: "username=" + registusername.value + "&password=" + registpassword.value,
        headers: {
            "Content-type": "application/x-www-form-urlencoded"
        }
    })

    let {error, data} = await res.json();
    console.log(error, data)

    // 如果成功
    if(!error) {
        // 关闭注册面板
        Observer.emit("regist-hide");
        // 打开登录面板
        Observer.emit("login-show");
        // 提示
        pxmu.success(data);
        return;
    }
    pxmu.fail(data);


}